<template>
    <!-- 点击综合排序后出现的蒙版 -->
    <div :class="{'open':isSort || isScreen}" @click.self="hideView">
        <!-- 综+距+品+筛 -->
        <div class="vfilter_wrap" v-if="vfilterData" :class="{searchNext:isSearchNext}">
            <aside class="vfilter">
                <div class="vfilter-nav" v-for="(item,index) in vfilterData.navTab" :key="index" 
                :class="{'vfilter-bold':currentFilter==index}" @click="vfilterSort(index)">
                    <span>{{item.name}}</span>
                    <i v-if="item.icon" :class="'fa fa-'+item.icon"></i>
                </div>
            </aside>
        </div>
        <!-- 综合排序 -->
        <section class="vfilter-extend" v-if="isSort">
            <ul>
                <li v-for="(item,index) in vfilterData.sortBy" :key="index" @click="selectSort(item,index)">
                    <span :class="{'selectName':currentSort==index}">{{item.name}}</span>
                    <i class="fa fa-check" v-show="currentSort==index"></i>
                </li>
            </ul>
        </section>
        <!-- 筛选 -->
        <section class="vfilter-extend" v-if="isScreen">
            <div class="vfilter-sort">
                <div v-for="(screen,index) in vfilterData.screenBy" :key="index" class="morefilter">
                    <p class="title">{{screen.title}}</p>
                    <ul>
                        <li v-for="(item,i) in screen.data" :key="i" 
                        :class="{'selectFilter':item.select}" @click="selectBtn(item,screen)">
                            <img v-if="item.icon" :src="item.icon">
                            <span>{{item.name}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        <!-- 清空与确定按钮 -->
        <div class="morefilter-btn">
            <span :class="{'edit':edit}" class="morefilter-clear" @click="clearBtn">清空</span>
            <span class="morefilter-ok" @click="fliterOK">确定</span>
        </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'vfilter',
        data() {
            return {
                currentFilter: 0, //用来判断点击的是推荐商家下面的哪个index，哪个就加粗
                isSort: false, //点击综排判断蒙版是否显示，默认不显示
                currentSort: 0, //判断点击的是哪个综合排序之后出现的下拉列表的index
                isScreen: false, //点击筛选判断蒙版是否显示，默认不显示
            }
        },
        props: {
            vfilterData: Object,
            //父组件改变子组件样式，通过外部传值
            isSearchNext: {
                type: Boolean,
                default: false
            }

        },
        computed: {
            edit() {
                let edit = false;
                this.vfilterData.screenBy.forEach(screen => {
                    screen.data.forEach(item => {
                        if (item.select) {
                            edit = true
                        }
                    })
                });
                return edit
            },
            // position() {
            //     return `position: ${this.posit.position};
            //     top: ${this.posit.top};
            //     width: ${this.posit.width}`;
            // },
        },
        methods: {
            vfilterSort(index) {
                this.currentFilter = index;
                //判断点击那个index
                switch (index) {
                    case 0: //0是综合排序
                        this.isSort = true;
                        //注册一个固定搜索框事件，在home里面触发
                        this.$emit('searchFixed', true);
                        break;
                    case 1:
                        this.$emit('update', {
                            condition: this.vfilterData.navTab[1].condition
                        })
                        break;
                    case 2:
                        this.$emit('update', {
                            condition: this.vfilterData.navTab[2].condition
                        })
                        break;
                    case 3:
                        this.isScreen = true;
                        this.isSort = false;
                        this.$emit('searchFixed', true);
                        break;
                    default:
                        this.hideView()
                        break;
                }
            },
            //注册一个取消固定搜索框事件，在home里面触发
            hideView() {
                this.isSort = false;
                this.isScreen = false
                this.$emit("searchFixed", false)
            },
            //点击综排后
            selectSort(item, index) {
                this.currentSort = index;
                this.vfilterData.navTab[0].name = this.vfilterData.sortBy[index].name;
                this.hideView();
                //更新数据,得到排序规则
                this.$emit("update", {
                    condition: item.code
                })
            },
            //点击筛选后点击的内容变色：只有商家服务可以多选，所以传screen的id来判断
            selectBtn(item, screen) {
                if (screen.id !== "MPI") {
                    screen.data.forEach(ele => {
                        ele.select = false
                    });
                }
                item.select = !item.select
            },
            clearBtn() {
                this.vfilterData.screenBy.forEach(screen => {
                    screen.data.forEach(item => {
                        item.select = false
                    })
                })
            },

            fliterOK() {
                let screenData = {
                    MPI: "",
                    offer: "",
                    per: "",
                }
                let mpiStr = "";
                this.vfilterData.screenBy.forEach(screen => {
                    screen.data.forEach((item, index) => {
                        if (item.select) {
                            //两种情况 单选与多选
                            if (screen.id !== "MPI") {
                                //单选
                            } else {
                                //多选，fengniao,pinpai
                                mpiStr += item.code + ",";
                                screenData[screen.id] = mpiStr;
                            }
                        }
                    })
                })
                console.log(mpiStr);
                this.$emit("update", {
                    condition: screenData
                });
                this.hideView();
            },
        },
    }
</script>
<style scoped>
    .searchNext {
        position: fixed !important;
        top: 52px !important;
        width: 100% !important;
    }
    
    .vfilter_wrap {
        background: #fff;
        position: sticky;
        top: 54px;
        z-index: 10;
    }
    
    .vfilter {
        position: relative;
        border-bottom: 1px solid #ddd;
        line-height: 10.4vw;
        z-index: 101;
        height: 10.666667vw;
        display: flex;
        justify-content: space-around;
    }
    
    .vfilter-nav {
        flex: 1;
        text-align: center;
        color: #666;
        font-size: 0.8333rem;
    }
    
    .vfilter-nav i {
        width: 1.6vw;
        height: 0.8vw;
        margin-left: 1.333333vw;
        margin-bottom: 0.533333vw;
        fill: #333;
        will-change: transform;
    }
    
    .vfilter-bold {
        font-weight: 600;
        color: #333;
    }
    /* 显示蒙版  */
    
    .open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease-in-out;
        z-index: 3;
    }
    
    .vfilter-extend {
        background-color: #fff;
        color: #333;
        padding-top: 2.133333vw;
        position: absolute;
        width: 100%;
        z-index: 4;
        left: 0;
        top: 24.533333vw;
    }
    
    .vfilter-extend li {
        position: relative;
        padding-left: 5.333333vw;
        line-height: 10.666667vw;
        overflow: hidden;
    }
    
    .fa-check {
        float: right;
        color: #009eef;
        margin-right: 3.733333vw;
        line-height: 10.666667vw;
    }
    
    .selectName {
        color: #009eef;
    }
    /* 筛选 */
    
    .vfilter-sort {
        background: #fff;
        padding: 0 2.666667vw;
        line-height: normal;
    }
    
    .morefilter {
        margin: 2.666667vw 0;
        overflow: hidden;
    }
    
    .morefilter .title {
        margin-bottom: 2vw;
        color: #666;
        font-size: 0.5rem;
    }
    
    .morefilter ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 0.8rem;
    }
    
    .morefilter li {
        box-sizing: border-box;
        width: 30%;
        height: 9.333333vw;
        line-height: 9.333333vw;
        margin: 0.8vw 1%;
        background: #fafafa;
    }
    
    .morefilter li img {
        width: 3.466667vw;
        height: 3.466667vw;
        vertical-align: middle;
        margin-right: 0.8vw;
    }
    
    .morefilter li span {
        margin-left: 2%;
        vertical-align: middle;
    }
    
    .morefilter-btn {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fafafa;
        box-shadow: 0 -0.266667vw 0.533333vw 0 #ededed;
        line-height: 11.466667vw;
        box-sizing: border-box;
    }
    
    .morefilter-btn span {
        font-size: 0.826667rem;
        text-align: center;
        text-decoration: none;
        flex: 1;
    }
    
    .morefilter-clear {
        color: #ddd;
        background: #fff;
    }
    
    .morefilter-ok {
        color: #fff;
        background: #00d762;
        border: 0.133333vw solid #00d762;
    }
    
    .selectFilter {
        color: #3190e8 !important;
        background-color: #edf5ff !important;
    }
    
    .edit {
        color: #333 !important;
    }
</style>
</style>